import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, Card,Modal,Checkbox,message,Pagination} from 'antd'
import {materialquery,contentQuery,recommandAdd,recommanddelete,recommandsort} from 'actions/common'
import '../../style/home.less'

//abc
const Search = Input.Search;
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class adsetEdit extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",
      contentlist:"",
      visible:false,
      checkarr:[],
      pagecurrent:1,//当前页码
      total:0,
    }
    this.type=["新增视频","行业要闻","新增大咖","新增大咖","新增专题","新增大咖","新增大咖"];
    this.checkboxarr=[];
    this.keyword={"contentTitle":"",};//搜索关键词
    this.pagesize = 6;//每页条数
  }
  componentDidMount() {
    
  }
  componentWillMount(){
    this.init();
  }
  init(){
    this.props.dispatch(materialquery({'contentType':this.props.contentType},(respose) => {
        this.setState({
          list: respose.respData,
        })
      }))
  }
  handleOk(){
    let contentId="";
    let contentType="";
    let list=this.state.contentlist.resultData;
    for(var i=0;i<list.length;i++){
      if(this.state.checkarr[i]){
        contentId+=list[i].id+",";
        contentType=list[i].type
      }
    }
    this.props.dispatch(recommandAdd({ contentId: contentId,contentType:this.props.params.contentType}, (respose) => {
      this.init();
      this.setState({
        visible: false,
        pagecurrent:1
      });
    }))
  }

  handleCancel(){
    this.setState({
      visible: false,
      pagecurrent:1
    });
  }

  onChange(value,obj){
    this.checkboxarr[value]=obj.target.checked
    this.setState({
      checkarr:this.checkboxarr
    });
  }

  showdialog(){//显示弹框
    this.checkboxarr=[];
    this.keyword = {"contentTitle":''};
    this.selectList()
  }
  
  dellistFn(id,contentType,i){//删除推荐
    this.props.dispatch(recommanddelete({contentType:contentType,id:id}, (respose) => {
      let list=this.state.list;
      list.resultData.list.splice(i,1);
      this.setState({
        list: list
      });
      
    }))
  }
  sortlistFn(id,contentType,i){//推荐排序
    this.props.dispatch(recommandsort({contentType:contentType,contentId:id}, (respose) => {
      this.init();
    }))
  }
  selectList(pageNumber){//查询弹窗数据列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword,this.props.params);
    this.props.dispatch(contentQuery(datajson, (respose) => {
      this.checkboxarr=[];
      // if(respose.respData.resultData.length==0){
      //   message.error("没有数据");
      //   return;
      // }
      for(var i=0;i<respose.respData.resultData.length;i++){
        this.checkboxarr.push(false)
      }
      this.setState({
        contentlist: respose.respData,
        visible: true,
        checkarr:this.checkboxarr,
        total:respose.respData.count,
        pagecurrent:pageNumber||1
      });      
    }))
  }

  searchData(vaule){//搜索内容
    this.keyword = {"contentTitle":vaule};
    this.selectList(1);
  }

  render () {
    const { Meta } = Card;
    const CheckboxGroup = Checkbox.Group;
    const typeName=this.state.list.resultData?this.state.list.resultData.typeName:'';
    const materiallist=this.state.list.resultData?this.state.list.resultData.list:[];//获取推荐内容
    const contentlist=this.state.contentlist.resultData?this.state.contentlist.resultData:[];//获取素材信息
    return (
      <div className="page" style={{padding:'0'}}>
        <div className="homeWrap">
          <div className="home-AD" style={{ background: '#ECECEC', padding: '15px' }}>
            {
              materiallist.map((materiallist,i)=> {
                return(
                  <Card
                      key={i}
                      style={{ width: 240 }}
                      cover={<img src={materiallist.imageAddr} />}
                    >
                    <Meta
                      title={materiallist.title}
                    />
                  <span onClick={this.dellistFn.bind(this,materiallist.id,this.state.list.resultData.type,i)} style={{marginRight:"5px",marginTop:"10px",display:"inline-block"}}>删除</span>
                  <span onClick={this.sortlistFn.bind(this,materiallist.id,this.state.list.resultData.type,i)} style={{marginRight:"5px",marginTop:"10px",display:"inline-block"}}>置顶</span>
                </Card>
                )
              })
            }
          </div>
        </div>
        {/*添加数据弹窗 */}
        {
          this.state.visible?
          <Modal
            title={"新增"+typeName}
            visible={this.state.visible}
            onOk={this.handleOk.bind(this)}
            width={600}
            okText="添加"
            onCancel={this.handleCancel.bind(this)}
          >
            <div style={{marginBottom:'10px'}}>
              <Search
                placeholder="请输入关键字"
                enterButton="搜索"
                size="large"
                onSearch={this.searchData.bind(this)}
              />
            </div>
            {
              contentlist.length != 0?
                <div>
                  <div className="home-dialog-AD" style={{ background: '#ECECEC', padding: '15px' }}>
                  {
                    contentlist.map((contentlist,i)=> {
                      return(
                        <Card
                            key={i}
                            style={{ width:155}}
                            extra={<Checkbox onChange={this.onChange.bind(this,i)} checked={this.state.checkarr[i]}></Checkbox>}
                            cover={<img src={contentlist.imageAddr} />}
                          >
                          <Meta
                            title={contentlist.title}
                            description={contentlist.createTime}
                          />
                      </Card>
                      )
                    })                
                  }
                </div>
                <div style={{marginTop:'10px'}}>
                  <Pagination current={this.state.pagecurrent} pageSize={6} total={this.state.total} onChange={this.selectList.bind(this)}/>
                </div>
              </div>:
              <div style={{textAlign:'center',height:'200px','lineHeight':'200px'}}>暂无数据</div>
            }
            
          </Modal>:''
        }
        
      </div>
    )

  }
}


